<template>
  <view class="optionGroup">
    <view class="option u-f-ac" v-for="(item,index) in optionList" :key="index" :class="[value.indexOf(item.optionId)>-1?'select-border':'',$attrs.answer&&item.optionRight?'right-border':'']"
      @click="CheckOption(item.optionId)">
      <!-- $attrs.answer.indexOf(item.optionId)>-1&&!item.optionRight?'wrong-color icon-cuo':'' -->
      <view v-if="$attrs.answer&&item.optionRight" :class="['check iconfont',$attrs.answer&&item.optionRight?'right-color icon-duigou':'']"></view>
      <view v-else class="check" :class="[value.indexOf(item.optionId)>-1?'check-color':'',$attrs.answer&&$attrs.answer.indexOf(item.optionId)>-1?'color99':'']">{{item.optionId}}</view>
      <view class="option-text" :class="{'check-text':value.indexOf(item.optionId)>-1}">
        <jyf-parser :html="item.optionText" ref="article" v-if="item.optionText"></jyf-parser>
        <image :src="item.imageUrl" v-if="item.imageUrl" mode="aspectFit"></image>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    props: {
      optionList: {
        type: Array,
        default: []
      },
      // 是否启用点击状态
      disabled: {
        type: Boolean,
        default: false
      },
      value: {
        type: String,
        default: ""
      }
    },
    watch: {
      value: function(val) {
        console.log(val)
      }
    },
    data() {
      return {};
    },
    methods: {
      CheckOption(e) {
        if (!this.disabled) {
          // let existIndex=this.value.indexOf(e.target.dataset.check)
          // if(existIndex<0){
          //   this.value.push(e.target.dataset.check)
          // }else{
          //   this.value.splice(existIndex,1)
          // }

          console.log('多选中', e)
          this.$emit('checkboxChange', e)
        }
      }
    }
  }
</script>

<style lang="scss">
  .option {
    @include option;
  }

  .select-border {
    border: 1px solid #00A0F0;
  }

  .right-border {
    border: 1px solid #38D253;
  }
</style>
